import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { Button, ConfigProvider, Pagination } from 'antd';
import { GlobalRegistry } from '@inbiz/core';
import { getMessage, TextWidget } from '@inbiz/react';
import { commonLang } from '@inbiz/utils';
import './index.less';
import { useEffect, useState } from 'react';

export type IPageComponent = {
  setCurrent?: (page: number) => void;
  setPageSize?: (pageSie: number) => void;
  onChange?: (current: number, pageSize: number) => void;
  customPageSizeArr?: number[];
  total: number;
  pageSize: number;
  current: number;
  className?: string;
};

export default function PageComponent(props: IPageComponent) {
  const {
    setCurrent,
    setPageSize,
    onChange,
    total,
    pageSize,
    current,
    customPageSizeArr,
  } = props;
  const itemRender = (current: number, type: string, origin: any) => {
    if (type === 'prev') {
      return (
        <Button>
          <LeftOutlined />
        </Button>
      );
    }
    if (type === 'next') {
      return (
        <Button>
          <RightOutlined />
        </Button>
      );
    }
    return origin;
  };
  const pageSizeArr = [10, 20, 30, 50, 100];
  const onchange = (page: number, pageSize: number) => {
    setCurrent?.(page);
    setPageSize?.(pageSize);
    onChange?.(page, pageSize);
  };
  //分页器多语言
  const [locale, $locale] = useState(commonLang[GlobalRegistry.getDesignerLanguage()?.toLocaleLowerCase() as keyof typeof commonLang])
  useEffect(() => {
    $locale(commonLang[GlobalRegistry.getDesignerLanguage()?.toLocaleLowerCase() as keyof typeof commonLang])
  }, [GlobalRegistry.getDesignerLanguage()]);
  return (
    <div
      className={`PaginationBox ${props.className || ''}`}
      style={{ display: total > 0 ? 'flex' : 'none', alignItems: 'center' }}
    >
      <ConfigProvider locale={locale}>
        <Pagination
          showSizeChanger
          total={total}
          showTotal={(total, range) =>
            `${range[0]}-${range[1]} / ${total}${getMessage('version.items')}`
          }
          itemRender={itemRender}
          // showQuickJumper
          current={current}
          pageSize={pageSize}
          pageSizeOptions={customPageSizeArr || pageSizeArr}
          onChange={onchange}
        />
        <div className="total">
          <TextWidget>version.total</TextWidget> {Math.ceil(total / pageSize)}{' '}
          <TextWidget>version.page</TextWidget>
        </div>
      </ConfigProvider>
    </div>
  );
}
